<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>群组列表 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 70px;
    }
    
    /* 导航栏样式 */
    .navbar {
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      z-index: 1050;
    }
    
    /* 通用样式 */
    .group-section {
      margin-bottom: 30px;
      padding-top: 15px;
      border-top: 1px solid #eee;
    }
    
    .group-section:first-child {
      border-top: none;
    }
    
    .section-title {
      font-size: 16px;
      margin-bottom: 15px;
      color: #333;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .section-title i {
      margin-right: 8px;
      color: #6c757d;
    }
    
    .section-title .more-link {
      font-size: 14px;
      color: #0d6efd;
      text-decoration: none;
    }
    
    /* 群组信息通用样式 */
    .group-name {
      font-weight: 600;
      color: #333;
    }
    
    .group-meta {
      font-size: 12px;
      color: #666;
    }
    
    .group-desc {
      font-size: 13px;
      color: #555;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    /* 图片处理 */
    .group-img {
      object-fit: cover;
      border-radius: 8px;
    }
    
    .no-group-img {
      background-color: #e3f2fd;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1976d2;
      border-radius: 8px;
    }
    
    .multi-group-imgs {
      position: relative;
      height: 100%;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .multi-group-imgs img {
      position: absolute;
      width: 60%;
      height: 60%;
    }
    
    .multi-group-imgs img:first-child {
      top: 0;
      left: 0;
    }
    
    .multi-group-imgs img:nth-child(2) {
      top: 0;
      right: 0;
    }
    
    .multi-group-imgs img:nth-child(3) {
      bottom: 0;
      left: 0;
    }
    
    /* 网格卡片样式 */
    .grid-group-card {
      transition: transform 0.2s, box-shadow 0.2s;
      height: 100%;
    }
    
    .grid-group-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
    
    .grid-group-img-container {
      height: 120px;
      position: relative;
    }
    
    .grid-group-member-count {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background-color: rgba(0,0,0,0.6);
      color: white;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 10px;
      display: flex;
      align-items: center;
    }
    
    .grid-group-member-count i {
      font-size: 9px;
      margin-right: 3px;
    }
    
    /* 列表样式 */
    .list-group-item {
      transition: background-color 0.2s;
    }
    
    .list-group-item:hover {
      background-color: #f0f7ff;
    }
    
    .list-group-img {
      width: 70px;
      height: 70px;
    }
    
    /* 横幅样式 */
    .banner-group-item {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      height: 160px;
      margin-bottom: 15px;
    }
    
    .banner-group-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
      padding: 15px;
      color: white;
    }
    
    .banner-group-name {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 5px;
    }
    
    .banner-group-meta {
      font-size: 12px;
      opacity: 0.9;
    }
    
    /* 标签式样式 */
    .tag-group-item {
      background-color: white;
      border-radius: 10px;
      padding: 12px;
      transition: all 0.2s;
      width: calc(50% - 8px);
    }
    
    .tag-group-item:hover {
      transform: scale(1.03);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    .tag-group-img {
      width: 50px;
      height: 50px;
      margin-bottom: 8px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
      z-index: 1040;
    }
    
    /* 按钮样式 */
    .join-btn {
      font-size: 12px;
      padding: 3px 10px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航栏 -->
  <nav class="navbar navbar-light bg-white fixed-top">
    <div class="container-fluid px-4">
      <button class="btn btn-link p-0 me-2" type="button">
        <i class="fa fa-arrow-left text-dark"></i>
      </button>
      <div class="search-container flex-grow-1 mx-2">
        <div class="input-group">
          <span class="input-group-text bg-transparent border-0 p-0 me-2">
            <i class="fa fa-search text-secondary"></i>
          </span>
          <input type="text" class="form-control bg-transparent border-0 p-0" 
                 placeholder="搜索群组..." aria-label="搜索群组">
        </div>
      </div>
      <button class="btn btn-primary btn-sm" type="button">
        <i class="fa fa-plus me-1"></i> 创建
      </button>
    </div>
  </nav>

  <!-- 主内容区 -->
  <div class="container-fluid px-4" style="margin-top: 56px; padding-top: 15px;">
    <!-- 1. 网格卡片式群组列表 -->
    <div class="group-section">
      <h6 class="section-title">
        <span><i class="fa fa-th-large"></i>推荐群组</span>
        <a href="#" class="more-link">更多</a>
      </h6>
      <div class="row gap-3">
        <!-- 有图片的群组 -->
        <div class="col-6">
          <div class="card grid-group-card border-0 shadow-sm rounded-3 overflow-hidden">
            <div class="grid-group-img-container">
              <img src="https://picsum.photos/400/300?random=1" class="w-100 h-100 group-img" alt="摄影爱好者">
              <div class="grid-group-member-count">
                <i class="fa fa-users"></i> 2.3k
              </div>
            </div>
            <div class="p-3">
              <h6 class="group-name mb-1">摄影爱好者</h6>
              <p class="group-meta mb-2">摄影 · 238人在线</p>
              <p class="group-desc mb-3">分享摄影技巧，交流拍摄心得，展示优秀作品</p>
              <button class="btn btn-primary btn-sm join-btn rounded-pill w-100">加入群组</button>
            </div>
          </div>
        </div>
        
        <!-- 无图片的群组 -->
        <div class="col-6">
          <div class="card grid-group-card border-0 shadow-sm rounded-3 overflow-hidden">
            <div class="grid-group-img-container">
              <div class="no-group-img w-100 h-100" style="font-size: 32px;">
                <i class="fa fa-code"></i>
              </div>
              <div class="grid-group-member-count">
                <i class="fa fa-users"></i> 5.7k
              </div>
            </div>
            <div class="p-3">
              <h6 class="group-name mb-1">前端开发者</h6>
              <p class="group-meta mb-2">技术 · 412人在线</p>
              <p class="group-desc mb-3">讨论前端技术，分享开发经验，解决技术难题</p>
              <button class="btn btn-primary btn-sm join-btn rounded-pill w-100">加入群组</button>
            </div>
          </div>
        </div>
        
        <!-- 多图片的群组 -->
        <div class="col-6">
          <div class="card grid-group-card border-0 shadow-sm rounded-3 overflow-hidden">
            <div class="grid-group-img-container multi-group-imgs">
              <img src="https://picsum.photos/200/200?random=10" class="group-img" alt="群组图片1">
              <img src="https://picsum.photos/200/200?random=11" class="group-img" alt="群组图片2">
              <img src="https://picsum.photos/200/200?random=12" class="group-img" alt="群组图片3">
              <div class="grid-group-member-count">
                <i class="fa fa-users"></i> 1.8k
              </div>
            </div>
            <div class="p-3">
              <h6 class="group-name mb-1">旅行足迹</h6>
              <p class="group-meta mb-2">旅行 · 156人在线</p>
              <p class="group-desc mb-3">分享旅行攻略，记录美好瞬间，约伴同行</p>
              <button class="btn btn-primary btn-sm join-btn rounded-pill w-100">加入群组</button>
            </div>
          </div>
        </div>
        
        <!-- 有图片的群组 -->
        <div class="col-6">
          <div class="card grid-group-card border-0 shadow-sm rounded-3 overflow-hidden">
            <div class="grid-group-img-container">
              <img src="https://picsum.photos/400/300?random=4" class="w-100 h-100 group-img" alt="美食分享">
              <div class="grid-group-member-count">
                <i class="fa fa-users"></i> 3.2k
              </div>
            </div>
            <div class="p-3">
              <h6 class="group-name mb-1">美食分享家</h6>
              <p class="group-meta mb-2">美食 · 302人在线</p>
              <p class="group-desc mb-3">探寻各地美食，分享烹饪技巧，推荐特色餐厅</p>
              <button class="btn btn-primary btn-sm join-btn rounded-pill w-100">加入群组</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 2. 列表式群组列表 -->
    <div class="group-section">
      <h6 class="section-title">
        <span><i class="fa fa-list"></i>热门群组</span>
        <a href="#" class="more-link">更多</a>
      </h6>
      <div class="bg-white rounded-3 p-1">
        <!-- 有图片的群组 -->
        <a href="#" class="list-group-item d-block p-3">
          <div class="d-flex">
            <img src="https://picsum.photos/200/200?random=5" class="list-group-img group-img me-3" alt="读书俱乐部">
            <div class="flex-grow-1">
              <div class="d-flex justify-content-between">
                <h6 class="group-name">读书俱乐部</h6>
                <button class="btn btn-primary btn-sm join-btn rounded-pill">加入</button>
              </div>
              <p class="group-meta mb-1">文学 · 1,254名成员 · 89人在线</p>
              <p class="group-desc">分享阅读心得，推荐好书，组织线下读书会活动</p>
            </div>
          </div>
        </a>
        
        <!-- 无图片的群组 -->
        <a href="#" class="list-group-item d-block p-3">
          <div class="d-flex">
            <div class="no-group-img list-group-img me-3" style="font-size: 24px;">
              <i class="fa fa-music"></i>
            </div>
            <div class="flex-grow-1">
              <div class="d-flex justify-content-between">
                <h6 class="group-name">独立音乐圈</h6>
                <button class="btn btn-primary btn-sm join-btn rounded-pill">加入</button>
              </div>
              <p class="group-meta mb-1">音乐 · 876名成员 · 42人在线</p>
              <p class="group-desc">分享独立音乐，发现新锐音乐人，讨论音乐创作</p>
            </div>
          </div>
        </a>
        
        <!-- 多图片的群组 -->
        <a href="#" class="list-group-item d-block p-3">
          <div class="d-flex">
            <div class="multi-group-imgs list-group-img me-3">
              <img src="https://picsum.photos/200/200?random=13" class="group-img" alt="群组图片1">
              <img src="https://picsum.photos/200/200?random=14" class="group-img" alt="群组图片2">
              <img src="https://picsum.photos/200/200?random=15" class="group-img" alt="群组图片3">
            </div>
            <div class="flex-grow-1">
              <div class="d-flex justify-content-between">
                <h6 class="group-name">健身达人</h6>
                <button class="btn btn-primary btn-sm join-btn rounded-pill">加入</button>
              </div>
              <p class="group-meta mb-1">运动 · 2,103名成员 · 156人在线</p>
              <p class="group-desc">分享健身经验，记录运动成果，交流营养搭配</p>
            </div>
          </div>
        </a>
      </div>
    </div>
    
    <!-- 3. 横幅式群组列表 -->
    <div class="group-section">
      <h6 class="section-title">
        <span><i class="fa fa-bullhorn"></i>官方推荐</span>
        <a href="#" class="more-link">更多</a>
      </h6>
      
      <!-- 有图片的群组横幅 -->
      <a href="#" class="banner-group-item d-block">
        <img src="https://picsum.photos/800/400?random=7" class="w-100 h-100 object-cover" alt="创意设计">
        <div class="banner-group-overlay">
          <div class="banner-group-name">创意设计联盟</div>
          <div class="banner-group-meta">
            <span>设计 · 5.3k成员</span>
            <span class="mx-2">|</span>
            <span>官方认证群组</span>
          </div>
        </div>
      </a>
      
      <!-- 多图片的群组横幅 -->
      <a href="#" class="banner-group-item d-block">
        <div class="multi-group-imgs w-100 h-100">
          <img src="https://picsum.photos/800/400?random=16" class="w-100 h-100 object-cover" alt="群组图片1">
          <img src="https://picsum.photos/800/400?random=17" class="w-100 h-100 object-cover" alt="群组图片2">
          <img src="https://picsum.photos/800/400?random=18" class="w-100 h-100 object-cover" alt="群组图片3">
        </div>
        <div class="banner-group-overlay">
          <div class="banner-group-name">创业者社区</div>
          <div class="banner-group-meta">
            <span>职场 · 3.7k成员</span>
            <span class="mx-2">|</span>
            <span>每周线上分享会</span>
          </div>
        </div>
      </a>
    </div>
    
    <!-- 4. 标签式群组列表 -->
    <div class="group-section">
      <h6 class="section-title">
        <span><i class="fa fa-tags"></i>按兴趣分类</span>
        <a href="#" class="more-link">更多</a>
      </h6>
      <div class="d-flex flex-wrap gap-2">
        <!-- 有图片的群组标签 -->
        <a href="#" class="tag-group-item d-block">
          <img src="https://picsum.photos/200/200?random=8" class="tag-group-img group-img" alt="电影爱好者">
          <h6 class="group-name text-sm mb-1">电影爱好者</h6>
          <p class="group-meta">1.2k 成员</p>
        </a>
        
        <!-- 无图片的群组标签 -->
        <a href="#" class="tag-group-item d-block">
          <div class="no-group-img tag-group-img mx-auto" style="font-size: 20px;">
            <i class="fa fa-paint-brush"></i>
          </div>
          <h6 class="group-name text-sm mb-1 text-center">插画艺术</h6>
          <p class="group-meta text-center">856 成员</p>
        </a>
        
        <!-- 有图片的群组标签 -->
        <a href="#" class="tag-group-item d-block">
          <img src="https://picsum.photos/200/200?random=9" class="tag-group-img group-img" alt="宠物之家">
          <h6 class="group-name text-sm mb-1">宠物之家</h6>
          <p class="group-meta">3.5k 成员</p>
        </a>
        
        <!-- 多图片的群组标签 -->
        <a href="#" class="tag-group-item d-block">
          <div class="multi-group-imgs tag-group-img">
            <img src="https://picsum.photos/200/200?random=19" class="group-img" alt="群组图片1">
            <img src="https://picsum.photos/200/200?random=20" class="group-img" alt="群组图片2">
            <img src="https://picsum.photos/200/200?random=21" class="group-img" alt="群组图片3">
          </div>
          <h6 class="group-name text-sm mb-1">手工DIY</h6>
          <p class="group-meta">1.7k 成员</p>
        </a>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <div class="container-fluid">
      <div class="row text-center py-3">
        <div class="col-3">
          <a href="#" class="text-secondary d-block">
            <i class="fa fa-home fs-5 mb-1"></i>
            <span class="d-block text-xs">首页</span>
          </a>
        </div>
        <div class="col-3">
          <a href="#" class="text-secondary d-block">
            <i class="fa fa-compass fs-5 mb-1"></i>
            <span class="d-block text-xs">发现</span>
          </a>
        </div>
        <div class="col-3">
          <a href="#" class="text-primary d-block">
            <i class="fa fa-users fs-5 mb-1"></i>
            <span class="d-block text-xs">群组</span>
          </a>
        </div>
        <div class="col-3">
          <a href="#" class="text-secondary d-block">
            <i class="fa fa-user fs-5 mb-1"></i>
            <span class="d-block text-xs">我的</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 加入群组按钮状态切换
    document.querySelectorAll('.join-btn').forEach(btn => {
      btn.addEventListener('click', function(e) {
        e.preventDefault();
        
        if (this.textContent.trim() === '加入群组' || this.textContent.trim() === '加入') {
          this.textContent = '已加入';
          this.classList.remove('btn-primary');
          this.classList.add('btn-secondary');
        } else {
          this.textContent = this.textContent.trim() === '已加入' ? '加入' : '加入群组';
          this.classList.remove('btn-secondary');
          this.classList.add('btn-primary');
        }
      });
    });
    
    // 卡片点击效果
    document.querySelectorAll('.grid-group-card, .tag-group-item').forEach(card => {
      card.addEventListener('click', function(e) {
        // 避免点击按钮时触发卡片点击效果
        if (!e.target.closest('.join-btn')) {
          this.style.opacity = '0.8';
          setTimeout(() => {
            this.style.opacity = '1';
          }, 200);
        }
      });
    });
  </script>
</body>
</html>
